  <template>
    <div class="eachart-box">
        <div id="bar-box" style="height:100%;width:100%;"></div>
    </div>
</template>

<script>
    import echarts from 'echarts'
    export default {
      name: '',
      data(){
        return {
          charts: ''
        }
      },
      props: ['sevenDate', 'sevenDay'],
      mounted(){
        var that = this;
        this.$nextTick(function() {
            that.myChart = echarts.init(document.getElementById('bar-box'));
            that.initData();
        })
      },
      methods: {
        initData(){
            var that = this;
            const option = {
                title : {
                    text: that.sevenDay[0]+'至'+that.sevenDay[0]+'数据',
                    textStyle: {
                      fontSize: 12
                    }
                },
                color: ['#3dc9cc','#f5c941','#ff5757'],
                legend: {
                    data:['人数', '次数', '人均次数'],
                    x: 'right'
                },
                calculable : true,
                xAxis : [
                    {
                        type : 'category',
                        data : [that.sevenDay]
                    }
                ],
                yAxis : [
                    {
                        type : 'value'
                    }
                ],
                series : [
                    {
                        name:'人数',
                        type:'bar',
                        data:[that.sevenDate[0]]
                    },
                    {
                        name:'次数',
                        type:'bar',
                        data:[that.sevenDate[1]]
                    },
                    {
                        name:'人均次数',
                        type:'bar',
                        data:[that.sevenDate[2]]
                    }
                ]
            };
            that.myChart.setOption(option);
        }
      },
      watch: {
          sevenDate: function (){
              this.initData()
          },
          sevenDay: function (){
              this.initData()
          }
      }
    }
</script>

<style lang="less" scoped>
    .eachart-box{
        display: flex;
        justify-content: center;
        width: 100%;
        height: 100%;
    }
</style>
